import React, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import { connect } from 'dva';
import { Card, Input, Button, Modal, Form, notification } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';
import styles from './BindAlipayOrbankCard.less';

const FormItem = Form.Item;

@connect(({ bindAlipayOrbankCard, loading }) => ({
  bindAlipayOrbankCard,
  loading: loading.models.list,
}))
@Form.create()
class BindAlipayOrbankCard extends PureComponent {
  state = {
    visible: false,
    done: false,
  };

  formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'bindAlipayOrbankCard/fetch',
    });
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  showEditModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleDone = () => {
    setTimeout(() => this.addBtn.blur(), 0);
    this.setState({
      done: false,
      visible: false,
    });
  };

  handleCancel = () => {
    setTimeout(() => this.addBtn.blur(), 0);
    this.setState({
      visible: false,
    });
  };

  isOnSelect = value => {
    if (value !== 'present') {
      this.setState({});
    } else {
      this.setState({});
    }
  };

  handleSubmit = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    setTimeout(() => this.addBtn.blur(), 0);
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        done: true,
      });
      dispatch({
        type: 'bindAlipayOrbankCard/update',
        payload: {
          ...fieldsValue,
        },
      });
      notification.success({
        message: '成功提交',
        description: '您已成功提交,请稍后刷新页面！',
      });
    });
  };

  render() {
    const {
      bindAlipayOrbankCard: { data, alipay },
    } = this.props;
    const {
      form: { getFieldDecorator },
    } = this.props;
    const { visible, done } = this.state;

    const modalFooter = done
      ? { footer: null, onCancel: this.handleDone }
      : { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };

    const cardInfo = data ? (
      <div style={{ background: 'white', padding: '30px' }}>
        <Card title={`${data.nickname}`} bordered={false} style={{ width: 300 }}>
          {alipay ? (
            <div>
              <p>提现姓名:{`${alipay.name || ''}`}</p>
              <p>开户行:{`${alipay.bank || ''}`}</p>
              <p>提现账户:{`${alipay.account || ''}`}</p>
            </div>
          ) : (
            ''
          )}
          <Button
            type="primary"
            style={{ width: '100%', marginBottom: 8 }}
            icon="download"
            onClick={this.showModal}
            ref={component => {
              /* eslint-disable */
              this.addBtn = findDOMNode(component);
              /* eslint-enable */
            }}
          >
            绑定提现账号
          </Button>
        </Card>
      </div>
    ) : null;

    const getModalContent = () => {
      if (done) {
        return (
          <Result
            type="success"
            title="操作成功"
            description="已确认修改"
            actions={
              <Button type="primary" onClick={this.handleDone}>
                知道了
              </Button>
            }
            className={styles.formResult}
          />
        );
      }
      // const imageUrl = this.state.imageUrl;
      return (
        <Form onSubmit={this.handleSubmit}>
          <FormItem label="收款人" {...this.formLayout}>
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '请输入收款人姓名', max: 10 }],
            })(<Input placeholder="请输入收款人姓名" />)}
          </FormItem>
          <FormItem label="开户行" {...this.formLayout}>
            {getFieldDecorator('bank', {
              rules: [{ required: true, message: '请输入提现账户！', max: 20 }],
            })(<Input placeholder="请输入提现账户！" />)}
          </FormItem>
          <FormItem label="提现账号" {...this.formLayout}>
            {getFieldDecorator('account', {
              rules: [{ required: true, message: '请输入提现账户！', max: 20 }],
            })(<Input placeholder="请输入提现账户！" />)}
          </FormItem>
          <FormItem label="温馨提示" {...this.formLayout}>
            <span>
              请务必准确填写开户行信息及银行账号，填写完成后请仔细核对，确认无误后再点击保存。因账户信息填写错误而造成的资金损失或延迟到账等问题，由用户自行承担。
            </span>
          </FormItem>
        </Form>
      );
    };
    return (
      <PageHeaderWrapper>
        <div className={styles.standardList}>
          <Card
            className={styles.listCard}
            bordered={false}
            title="账号管理"
            style={{ marginTop: 24 }}
            bodyStyle={{ padding: '0 32px 40px 32px' }}
          >
            <card />
            <div className={styles.coverCardList}>
              <div className={styles.cardList}>{cardInfo}</div>
            </div>
          </Card>
        </div>
        <Modal
          title={done ? null : `提现管理`}
          className={styles.standardListForm}
          width={640}
          bodyStyle={done ? { padding: '72px 0' } : { padding: '28px 0 0' }}
          destroyOnClose
          visible={visible}
          {...modalFooter}
        >
          {getModalContent()}
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default BindAlipayOrbankCard;
